<template>
  <div class="backTop">
    <i
      class="ivu-icon ivu-icon-ios-arrow-up"
      title="返回顶部"
      ref="backTopT"
      v-if="scrollStatus.top"
      @click="backTop(0)"
    ></i>
    <i
      class="ivu-icon ivu-icon-ios-arrow-down"
      title="返回底部"
      ref="backTopB"
      v-if="scrollStatus.bottom"
      @click="backTop(1)"
    ></i>
  </div>
</template>

<script>
export default {
  name: "backTop",
  data() {
    return {
      el: null,
      flag: true,
      scrollStatus: {
        top: false,
        bottom: false
      }
    };
  },
  props: ["cont", "top"],
  watch: {
    $route(to) {
      this.$nextTick(() => {
        this.el.scrollHeight > this.el.offsetHeight
          ? (this.scrollStatus.bottom = true)
          : (this.scrollStatus.bottom = false);
      });
    }
  },
  created() {},
  mounted() {
    if (this.$parent.$refs[this.cont]) {
      this.$parent.$refs[this.cont] &&
        (this.el = this.$parent.$refs[this.cont]);
      this.$nextTick(() => {
        this.el.scrollHeight > this.el.offsetHeight &&
          (this.scrollStatus.bottom = true);
      });
      this.el.onscroll = () => {
        // 脱离顶部多少
        this.el.scrollTop > (this.top || 200)
          ? (this.scrollStatus.top = true)
          : (this.scrollStatus.top = false);
        // 距离底部多少
        this.el.scrollTop + this.el.offsetHeight + (Number(this.bottom) || 0) >=
        this.el.scrollHeight
          ? (this.scrollStatus.bottom = false)
          : (this.scrollStatus.bottom = true);
      };
    }
  },
  methods: {
    backTop(type) {
      var timer;
      if (this.flag) {
        this.flag = false;
        if (type) {
          timer = setInterval(() => {
            var osBottom =
              this.el.scrollHeight - this.el.scrollTop - this.el.offsetHeight;
            var speed = Math.floor(-osBottom / 6);
            this.el.scrollTop = this.el.scrollTop - speed;
            if (
              this.el.scrollTop + this.el.offsetHeight + 6 >
              this.el.scrollHeight
            ) {
              this.el.scrollTop = this.el.scrollHeight;
              this.flag = true;
              clearInterval(timer);
            }
          }, 30);
        } else {
          timer = setInterval(() => {
            var osTop = this.el.scrollTop;
            var speed = Math.floor(-osTop / 6);
            this.el.scrollTop = osTop + speed;
            if (osTop == 0) {
              this.flag = true;
              clearInterval(timer);
            }
          }, 30);
        }
      }
    }
  }
};
</script>

<style scoped>
.backTop {
  position: fixed;
  right: 30px;
  bottom: 30px;
  border-radius: 2px;
  cursor: pointer;
  z-index: 999;
}
.ivu-icon {
  display: block;
  font-family: Ionicons;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  background-color: rgba(0, 0, 0, 0.6);
  cont-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  text-transform: none;
  text-rendering: optimizeLegibility;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: -0.125em;
  text-align: center;
  color: #fff;
  font-size: 24px;
  padding: 8px 12px;
  margin-top: 10px;
}
</style>